<template>
  <div class="mobi">
    <div class="common-layout">
      <el-container>
        <el-header class="header">Header</el-header>
        <el-container>
          <el-aside class="aside" width="200px">
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#000"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item v-for="(item, index) in arr" :key="index" :index="index + '' + 1">
                <el-icon><setting /></el-icon>
                <span @click="ItemTabs(item.path)">{{ item.title }}</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-container>
            <el-main class="main">
              <div class="mians">
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                  <el-breadcrumb-item v-for="(items, index) in arrs" :key="index"
                    >{{ alls[items] }}
                  </el-breadcrumb-item>
                  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="sr">
                  <RouterView></RouterView>
                </div>
              </div>
            </el-main>
          </el-container>
        </el-container>
        <el-footer class="footer">Footer</el-footer>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
import { ref } from 'vue'
import alldata from '@/utils/Tab'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const arr: any = [
  {
    title: '直播',
    path: '/home/index'
  },
  {
    title: '娱乐',
    path: '/home/about'
  },
  {
    title: '团建',
    path: '/home/user'
  },
  {
    title: '资讯',
    path: '/home/my'
  }
]
const router = useRouter()
const route = useRoute()
const arrs: any = ref([])
const alls: any = ref(alldata)
//点击切
arrs.value = route.path.slice(1).split('/')
const ItemTabs = (path: any) => {
  router.push(path)
  setTimeout(() => {
    arrs.value = route.path.slice(1).split('/')
  }, 6000)
}
</script>
<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
  display: flex;
}
.header {
  width: 100%;
  height: 51px;
  line-height: 51px;
  text-align: center;
  font-size: 25px;
  background: rgb(22, 22, 89);
  color: rgb(234, 211, 211);
  font-weight: 900;
  background: linear-gradient(to right, yellow, blue, seagreen, red, #fff);
}
.main {
  flex: 1;
  background: #ccc;
}
.aside {
  background: #d9ecff;
  height: 897px;
 
}
.footer {
  width: 100%;
  height: 51px;
  line-height: 51px;
  text-align: center;
  font-size: 25px;
  background: rgb(22, 22, 89);
  color: rgb(234, 211, 211);
  font-weight: 900;
  background: linear-gradient(to left, yellow, blue, seagreen, red, #fff);
}
.el-menu-vertical-demo {
  background: #d9ecff;
}
</style>
